:root{
    --fc:#777;
    --title:2.3rem;
    --subtitle:1.1rem;
    --tc:#77d1ad;
}

html,
body {
    overflow: scroll;
    overflow-y: hidden;
    overflow-x: hidden;
    height: 100%;
}

* {
    padding: 0;
    margin: 0
}

.page {
    height: 100%;
    display: flex;
    flex-direction: column;

}

.pagecontent {
    flex: 1;
    overflow: auto;

}

a{
  color:  #77d1ad;
  cursor: pointer
}

a:hover{
    color:  #77d1ad;
}


body{
    font-family: '幼圆'

}

/* ---------navbar---------------- */

.navbar-link:not(.is-arrowless)::after{
    border-color: var(--tc)
}

.navbar-link.is-active, .navbar-link:hover, a.navbar-item.is-active, a.navbar-item:hover{
    color: var(--tc)
}

.navbar-burger {
    /* color: white; */
    height: 4.25rem;
}

.navbar-burger span {
    height: 3px;
    width: 20px;
    margin-top: 3px
}


/* -------------------btnWrap---------------------- */

a.logo{
    font-size: 3.5rem;
    font-weight: 900
}

.btnWrap{
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 3rem 0;
}


 button.mbtn{
    width: 10rem;
    height: 2.5rem;
    border: 1px solid var(--tc);
    background-color: white;
    color: var(--tc);
    border-radius: 0.5rem;
    transition: 0.5s;
}

 button.mbtn:hover{
    background-color: var(--tc);
    color: white;
    cursor: pointer;
    font-size: 1rem;
    transition: 0.5s;
}

 button.mbtn:active{
    background-color: #0a5c3b;
}

/* -----------------titleWrap-------------------- */

.titleWrap .title{
    color: var(--tc);
    text-shadow: rgba(0,0,0,.15) 0 0 1px;
    font-size: 3vh
}

.titleWrap .subtitle{
    color: #999;
    text-shadow: rgba(0,0,0,.15) 0 0 1px;
    font-size: 1rem;
    font-size: 2vh
}

.titleWrap .subtitle i{
    display: block;
    float: left;
    background-color: #999;
    height: 1px;
    width: 3rem;
    margin-top: 0.7rem;
}

.titleWrap .subtitle i:last-child{
    display: block;
    float: right;
    background-color: #999;
    height: 1px;
    width: 3rem;
    margin-top: 0.7rem;
}

.titleWrap{
    margin-top: 10vh;
    margin-bottom: 10vh;
}
.titleWrap .flex{
    display: flex;flex-direction: row;justify-content: center;align-items: flex-end
}


/* ------------listbg--------------- */

.listbg .hero {
    background: black url(../images/listbg1.jpeg) center / cover;
}

@media (max-width: 1024px) {
    .listbg .hero {
        background: black url(../images/listbg1.jpeg) center / cover;
    }
}

@media (max-width: 768px) {
    .listbg .hero {
        background: black url(../images/listbg1.jpeg) center / cover;
    }
}

.listbg .hero.is-fullheight {
    min-height: 40vh
}


.main {
    background-color: #f2f2f2;
    padding: 30px 0px;
}

/* ----------.main  .nav-right---------------------- */

.main .column .container {
    background-color: white;
}

.main .column .nav-right {

    background-color: white;
    /* border: 1px solid red; */
    padding: 1.5rem;
}

.main .column .nav-right .wrap {
    display: flex;
    flex-direction: column;
    text-align: center;
    border: 1px solid #ccc;
}

.main .column .nav-right .wrap div h1 {
    padding: 1rem
}

.main .column .nav-right .wrap div a {
    color: #4a4a4a
}

.main .column .nav-right .wrap div {
    padding: 0.5rem;
}

.main .column .nav-right .wrap div:not(:last-child) {

    border-bottom: 1px solid #ccc;

}





/* ------------------mobile-nav------------------- */


.mobile-nav{
    display: none;
}

.mobile-nav  .columns:last-child{
    margin-bottom:0
}


@media screen and (max-width: 800px) {
    .mobile-nav{
        z-index: 999;
        border-top: 1px solid var(--tc);
        box-shadow: 0 -1px 6px var(--tc);
        text-align: center;
        /* margin-bottom: 20px */
        display: block
    }
}


